<template>
  <div style="margin:0 0 0 10px">
    <Row>
      <div style="margin:0 0 10px 0">
        <Button type="primary" @click="showAdd">增加1:N关联数据</Button>
      </div>
      <Alert>
        增加1:N关联数据
        <template slot="desc">
          针对具有1对多的关联关系的数据的编辑表单，例如报表包含报表信息和参数
        </template>
      </Alert>
    </Row>
    <Row>
      <div style="margin:0 0 10px 0">
        <Button type="primary" @click="showStep">多步骤编辑</Button>
      </div>
      <Alert>
        多步骤编辑
        <template slot="desc">
          引导用户按步骤编辑，对用户更友好，每页信息较少
        </template>
      </Alert>
    </Row>
    <Row>
      <div style="margin:0 0 10px 0">
        <Button type="primary" @click="showUpload">上传文件</Button>
      </div>
      <Alert>
        上传文件
        <template slot="desc">
          可上传文件的表单
        </template>
      </Alert>
    </Row>
    <Add :visible.sync="addFormVisible" @on-ok="handleQuery"></Add>
    <Step :visible.sync="stepFormVisible" @on-ok="handleQuery"></Step>
    <Upload :visible.sync="uploadFormVisible" @on-ok="handleQuery"></Upload>
  </div>
</template>

<script>
  import Add from "./add"
  import Step from "./stepForm"
  import Upload from "./UploadForm"

  export default {
    name: "index",
    components: {Add, Step, Upload},
    data() {
      return {
        addFormVisible: false,
        stepFormVisible: false,
        uploadFormVisible: false
      }
    },
    methods: {
      handleQuery() {

      },
      showAdd() {
        this.addFormVisible = true
      },
      showStep() {
        this.stepFormVisible = true
      },
      showUpload() {
        this.uploadFormVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
